<!--
 * @description: 
 * @Author: Islands
 * @Date: 2023-11-13 13:07:08
 * @LastEditTime: 2024-03-27 22:01:53
-->

<script lang='ts' setup>
import { storeToRefs } from 'pinia';
import { ref, watch, nextTick } from 'vue';
import SvgIcon from '@/components/svg-icon/index.vue';
import { useRoute, useRouter } from 'vue-router';
import { useTagViewsStore } from '@/store/local/tab-views/index';
import { ITabs } from '@/components/tag-views/index.d';
import { WHITE_TABS, NO_REMOVE_TABS } from '@/mock/tab-views/index'
const route = useRoute();
const router = useRouter();
const { tabList, contentId, activeTab } = storeToRefs(useTagViewsStore());


//添加选项卡方法
const addTab = () => {
    //从当前路由获取path和title
    const { path, meta } = route;
    if (!WHITE_TABS.includes(path)) {
        //通过vuex设置
        const tab: ITabs = {
            path: path,
            title: meta.title as string,
            icon: meta.icon as string,
        }
        useTagViewsStore().setTbaList(tab);
    }
};

//监听路由
watch(() => route.path, () => {
    //设置激活的选项卡
    if (!WHITE_TABS.includes(route.path)) {
        useTagViewsStore().setActiveTab(route.path)
        //把当前路由添加到选项卡数据
        addTab();
    }


});

//选项卡左键点击事件
const handleClick = (event: any) => {
    //跳转路径
    router.push({ path: event.props.name })
};

/**
 * 单个移除事件
 * @param targetName 
 */
const removeTab = (targetName: any) => {
    if (NO_REMOVE_TABS == targetName) return;
    if (activeTab === targetName) {
        tabList.value.forEach((tab: ITabs, index: number) => {
            if (tab.path === targetName) {
                const nextTab = tabList.value[index + 1] || tabList.value[index - 1];
                if (nextTab) {
                    useTagViewsStore().setActiveTab(nextTab.path);
                }
            }
        })
    }
    useTagViewsStore().removeTabList(targetName, function (index: any) {
        let newTabs = tabList.value[index];
        router.push(newTabs.path)
    });
};

/**
 * 右键点击事件
 */
const visible = ref<boolean>(false);
const closeVisible = () => {
    visible.value = false;
}
const left = ref('');
const top = ref('');
/**
 * 右键点击触发事件
 */
const openRightChange = (e: any) => {
    if (e.srcElement.id) {
        let currentContextTabId = e.srcElement.id.split("-")[1];
        left.value = e.clientX;
        top.value = e.clientY + 10;
        visible.value = true;
        useTagViewsStore().setContextTabId(currentContextTabId)
    }
};

//关闭所有
const closeAllTabs = () => {
    useTagViewsStore().closeAllTabs();
    router.push(NO_REMOVE_TABS);
}
//关闭其他，左边，右边
const closeOtherTabs = (_par: string) => {
    router.push(contentId.value)
};
//刷新
const refresh = (view: any) => {
    nextTick(() => {
        router.replace({ path: view }).catch((err) => {

            console.warn(err);
        });
    });
}
/**
 * 监听右键点击后列表是否关闭状态
 */
watch(() => visible.value, () => {
    if (visible.value) {
        window.addEventListener('click', () => closeVisible());
    } else {
        //此处是为了不必要的资源浪费
        window.removeEventListener('click', () => closeVisible());
    }
});


</script>
<template>
    <div class="tags-views">
        <el-tabs type="card" v-model="activeTab" editable @tab-click="handleClick" @tab-remove="removeTab"
            @contextmenu.prevent.native="openRightChange($event)">
            <el-tab-pane v-for="item in tabList" :key="item.path" :label="item.title" :name="item.path">
                <template #label>
                    <svg-icon :icon="item.icon" />
                    {{ item.title }}
                </template>
            </el-tab-pane>
        </el-tabs>
    </div>

    <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="tags-view__menu">
        <li @click="refresh(contentId)">
            <svg-icon icon="refresh" />
            刷新
        </li>
        <li @click="removeTab(contentId)">
            <svg-icon icon="close" />
            关闭
        </li>
        <li @click="closeOtherTabs('other')">
            <svg-icon icon="close_other" />
            关闭其它
        </li>
        <li @click="closeOtherTabs('left')">
            <svg-icon icon="close_left" />
            关闭左侧
        </li>
        <li @click="closeOtherTabs('right')">
            <svg-icon icon="close_right" />
            关闭右侧
        </li>
        <li @click="closeAllTabs">
            <svg-icon icon="close_all" />
            关闭所有
        </li>
    </ul>
</template>
<style lang='scss' scoped>
.tags-views {
    box-shadow: 0 1px 3px #0000001f, 0 0 3px #0000000a;
    border-bottom: 1px solid #d8dce5;
    //background-color: #fff;
    height: 30px;
    display: flex;
    align-items: center;

    .svgIcon {
        font-size: 12px;
        margin-right: 5px;
    }

}

:deep(.el-tabs) {
    --el-tabs-header-height: 30px !important;
}

:deep(.el-tabs__header) {
    margin: 0px;
}

//文本样式
:deep(.el-tabs__item) {
    text-align: center !important;
    border: 1px solid var(--tabs-header-border) !important;
    margin-right:5px !important;
    color: var(--tabs-header-text-color);
    font-size: 12px !important;
    font-weight: 400;
    padding: 0px 10px !important;
}

:deep(.el-tabs__nav) {
    border: none !important;
}

:deep(.is-active) {
    border-bottom: 1px solid transparent !important;
    border-color: 1px solid var(--tabs-header-border_active) !important;
    background-color: var(--tabs-header-border_active) !important;
    color: var(--tabs-header-text_active) !important;
}

//当前激活tab icon图标色
:deep(.is-active i) {
    color: var(--tabs-header-text_active) !important;
}

:deep(.el-tabs__item:hover) {
    color: var(--tabs-header_hover) !important;
}

:deep(.is-active:hover) {
    color: var(--tabs-header_hover) !important;
}

:deep(.el-tabs__content) {
    display: none !important;
}

:deep(.el-tabs__new-tab) {
    display: none;
}

.tags-view__menu {
    margin: 0;
    background: #fff;
    z-index: 3000;
    position: absolute;
    list-style-type: none;
    padding: 5px 0;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);

    li {
        margin: 0;
        padding: 7px 16px;
        cursor: pointer;

        &:hover {
            background: #eee;
        }
    }
}
</style>